<template>
  <div class="header">
    <div class="left">
      <div class="logo">
        <el-image :src="logo" />
      </div>
    </div>
    <div class="center">
      <h1>血液净化大数据</h1>
    </div>
    <div class="right">
      <div class="link-btn">
        <el-link @click="$emit('goLink', 1)">质控</el-link>
        <el-link @click="$emit('goLink', 2)">运营</el-link>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Header',
  data () {
    return {
      logo: require('@/assets/images/logo.png')
    }
  }
}

</script>
<style lang="scss" scoped>
.header {
  display: flex;
  height: 100%;
  // margin: 0 20px;
  background-image: url('../../../assets/images/header.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  .left {
    display: inline-flex;
    background-color: #fff;
    .logo {
      width: 211px;
      .el-image {
        margin: 10px auto;
        width: 191px;
      }
    }
  }
  .center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    h1 {
      padding: 0 !important;
      margin: 0 !important;
      color: #3096c7;
      font-size: 36px;
      font-weight: 500;
      font-family: 'Microsoft YaHei';
    }
  }
  .right {
    flex: 0 0 170px;
    background: #fff;
    display: flex;
    align-items: flex-end;
    .link-btn {
      width: 150px;
      height: 44px;
      margin-left: 20px;
      box-sizing: border-box;
      margin-bottom: 10px;
      .el-link {
        width: 70px;
        height: inherit;
        background: #3096c7;
        color: #fff;
        border-radius: 4px;
        font-size: 16px;
        &:first-child {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
